<template>
  <view class="body">
    <view class="body_item">
      <view>退款商品</view>
      <template v-for="item in detail.items" :key="item.id">
        <view class="flex goodsItem" v-if="goodsId.includes(item.id)">
          <view
            class="goods-cover cover"
            :style="{ backgroundImage: `url(${item.productImageUrl})` }"
          ></view>
          <view class="flex" style="width: 100%">
            <view class="goods-name">
              {{ item.productName }}
            </view>
            <view class="order-total">
              <view class="goods-price">¥{{ item.productSkuPrice || 0 }}</view>
              <view class="goods-count">x{{ item.productSkuQuantity }}</view>
            </view>
          </view>
        </view>
      </template>
    </view>
    <view class="body_item">
      <view
        class="flex refundType"
        v-if="detail.orderStatus !== 1"
        @click="
          linkTo(
            '/personalPages/order/refundApplication?orderId=' +
              detail.id +
              '&type=2' +
              '&goodsId=' +
              goodsId.join(',')
          )
        "
      >
        <image :src="ossImg('order/thtk_icon@2x.png')"></image>
        <view class="item_text"
          >退货退款
          <p class="text">已收到货，需要退还收到的货物</p>
        </view>
        <image class="arrow" :src="ossImg('personal/go@2x.png')" />
      </view>
      <view
        class="flex refundType"
        @click="
          linkTo(
            '/personalPages/order/refundApplication?orderId=' +
              detail.id +
              '&type=1' +
              '&goodsId=' +
              goodsId.join(',')
          )
        "
      >
        <image :src="ossImg('order/jtk_icon@2x.png')"></image>
        <view class="item_text"
          >仅退款
          <p class="text">未收到货或与商家协商同意不退货只退款</p>
        </view>
        <image class="arrow" :src="ossImg('personal/go@2x.png')" />
      </view>
    </view>
  </view>

  
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ossImg } from "@/utils/utils";
import { ref } from "vue";
import { GetOrderDetail } from "@/services/mall";
import privacyPopup from "@/components/privacy-popup";

const detail = ref({});
const goodsId = ref([]);

onLoad((option) => {
  console.log(option);
  goodsId.value = option.goodsId.split(",");
  getApp().accessLogAdd();
  GetDetail(option.orderId);
});

const GetDetail = async (id) => {
  const res = await GetOrderDetail(id);
  if (res?.code === 200) {
    detail.value = res.data;
  }
};

const linkTo = (url) => uni.navigateTo({ url });
</script>

<style lang="less" scoped>
.body {
  box-sizing: border-box;
  padding: 10px;

  .body_item {
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 15px 10px;
    font-size: 14px;
    margin-bottom: 10px;

    .goodsItem {
      margin-top: 10px;
    }

    .goods-cover {
      width: 68px;
      min-width: 68px;
      height: 68px;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.2);
    }

    .goods-name {
      padding: 0 12px 0 8px;
      box-sizing: border-box;
      font-size: 14px;
      flex: 1;
      color: #353535;
    }

    .order-total {
      color: #353535;
      text-align: right;
      font-size: 14px;

      .goods-count {
        font-size: 12px;
        color: #818181;
        line-height: 1;
        margin-top: 5px;
      }
    }

    .refundType {
      justify-content: space-between;
      align-items: center;

      .item_text {
        font-size: 16px;
        width: 280px;

        .text {
          font-size: 14px;
          color: #999;
          margin-top: 5px;
        }
      }

      image {
        width: 30px;
        height: 30px;
      }

      .arrow {
        width: 10rpx;
        height: 18rpx;
      }
    }

    .refundType:nth-child(2) {
      margin-top: 10px;
    }
  }
}
</style>